<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格页面</title>
<style>
  .grid-container {
    width: 300px;
    height: 300px;
    margin: 20px auto;
    border: 1px solid black;
  }
  .block1{
    width:100px;
    height:100px;
    float:left;
    background-color: black;
  }
  .block2{
    width:100px;
    height:100px;
    float:left;
    background-color:white;
  }
  .block3{
    width:100px;
    height:100px;
    clear:left;
    float:left;
    background-color: black;
  }
  .block4{
    width:100px;
    height:100px;
    clear:left;
    float:left;
    background-color:white;
  }

</style>
</head>
<body>

<div class="grid-container">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block1"></div>
  <div class="block4"></div>
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block2"></div>
  <div class="block1"></div>
</div>

</body>
</html>